<template>
	<view class="content">
		<!-- latitude：纬度，范围：-90~90- -->
		<!-- longitude：经度，范围：-180~180- -->
		<!-- scale：地图的缩放比率 -->
		<!-- markers：地图上的标记点数组 -->
		<!-- markertap：某个标记点被单击/轻拍事件的处理方法 -->
		<!-- F1：停车区分布地图 -->
		<map id="parkingMap" :style="{width: mapWidth+'px', height:mapHeight+'px'}"  :latitude="40.063868" :longitude="116.420872" :scale="15" :markers="markers" @markertap="doMarkerTap"></map>
		
		<!-- F2：停车区空闲情况 -->
		<!-- type：图表的类型，例如：column、line、pie.... -->
		<qiun-data-charts style="margin-top:10px" type="column" :chartData="parkingZoneData" :opts="parkingZoneOpts"/>
	</view>
</template>

<script>
import { parkingZoneList } from '../../service'
	export default {
		data() {
			return {
				mapWidth: 0,			//地图区域的宽度
				mapHeight: 0,			//地图区域的高度
				chartWidth: 0,			//统计图的宽度
				chartHeight: 280,		//统计图的高度
				parkingZones: [],		//停车区列表
				markers:[],				//地图上的标记点数组
				parkingZoneData: {},	//统计图表需要的停车区数据
				parkingZoneOpts:{color:['#090']},		//统计图需要的选项对象，可用于控制数据条的颜色
			}
		},
		//生命周期方法 —— 页面加载时
		async onLoad(){
			//1.读取窗口的尺寸（屏幕的高度-页签栏高度-导航条高度）
			let {windowWidth, windowHeight} = uni.getSystemInfoSync()
			this.mapWidth = windowWidth					//地图宽度
			this.chartWidth = windowWidth				//统计图宽度
			this.mapHeight = windowHeight - this.chartHeight  //地图高=窗口高-下方的统计图高度
			//2.向服务器发起异步请求，获取各个停车区的数据
			let data = await parkingZoneList()
			console.log(data)
			this.parkingZones = data
			//3.把停车区的数组数据映射为地图标记点(marker)的数组
			this.markers = this.parkingZones.map((z,i)=>{return {
				id: i,	//每个标记点的唯一标识，点击标记点可以读取到该值
				longitude: z.longitude,
				latitude: z.latitude,
				iconPath: '/static/img/loc.png',
				callout: {  //每个标记点上可以弹出的“气泡窗口”
					content: z.zname+'空余：'+z.unoccupied
				}
			}})
			//4.把停车区的数组数据映射为柱状统计图数据
			this.parkingZoneData = {
				//分类/类目，此处指X轴分为哪些列
				//categories: ['1区','2区','3区','4区'],
				categories: this.parkingZones.map(z=>z.zname.substr(-2)),
				//系列/连续，此处指连续的数据
				series:[
					// {
					// 	name: '总车位',
					// 	data: [100,200,300,200]
					// },
					{
						name: '空闲车位',
						//data: [30, 50, 40, 100]
						data: this.parkingZones.map(z=>z.unoccupied)
					}
				]
			}
		},
		methods: {
			//处理标记点被轻拍事件
			doMarkerTap(e){
				//从事件中读取轻拍事件发生所在的标记点坐标
				let longitude = e.detail.longitude
				let latitude = e.detail.latitude
				//让地图移动到此点为中心 —— 通过地图上下文，调用相关方法
				let ctx = uni.createMapContext('parkingMap', this)
				ctx.moveToLocation({longitude, latitude})
			}
		}
	}
</script>

<style>

</style>
